import React from 'react'
import {Route,Link,Switch} from 'react-router-dom';
import './content.css';
import Detail from './Detail';
import Home from './Home';
import { Redirect } from 'react-router-dom';

const New=(props)=>{
    // console.log(props);//!props是空{}
    return <h1>新手入门</h1>
}
const Login=()=><h1>登录页面</h1>

const User=(props)=>{
    console.log(props)
    return <h1>用户详情页--{props.match.params.userName}</h1>
}

//! 点击后，Conrent中左侧变化 ，右侧保持不变
const Content = () => {
    return (
        <div className='content-wrap'>
            <div className="content">
                <div className="left">
                    <Switch>
                        
                        {/* <Route exact path='/'><Home/></Route> */}
                        <Route path='/home'><Home/></Route>//!两个选一个
                        <Route path='/new'><New/></Route>//! 双标签相当于直接调用了，没有传属性，所以props为空
                        <Route path='/login'><Login/></Route>
                        <Route path='/detail/:id'><Detail/></Route>
                        <Route path='/:userName' component={User}/>

                        <Redirect to={`/home`}/>
                    </Switch>
                </div>
                <div className='right'></div>
            </div>
        </div>
    )
}

export default Content;
